<template>
  <div class="fans-container">
    <div class="detail-container">
      <header>粉丝概况</header>
      <div class="tabBar">
        <router-link to="/fans/index"  class="active">粉丝概况</router-link>
        <router-link to="/fans/info">粉丝画像</router-link>
        <router-link to="/fans/list">粉丝列表</router-link>
      </div>
      <div class="filter">
        <el-radio-group  @change="loadDataByButton" v-model="parms.type">
          <el-radio-button  label="0">今日</el-radio-button>
          <el-radio-button  label="1">本周</el-radio-button>
          <el-radio-button  label="7">近7天</el-radio-button>
          <el-radio-button  label="30">近30天</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="parms.time" type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"  @change="loadDataByTimeRange" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"/>
      </div>
      <Statist :article="all.article" :likes="all.likes" :collection="all.collection"/>
      <line-chart ref="lineChart"/>
      <div class="chart">
        <template v-for="item in pie">
          <doughnut-chart :data="item" v-if="item.title !='发文量-转化率'"/>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import Statist from './components/index/Statist.vue'
import LineChart from './components/index/LineChart.vue'
import DoughnutChart from './components/index/DoughnutChart.vue'
import { getFansStatistics } from '@/api/fans'
import DateUtil from '@/utils/date'

export default {
  name: 'ContentManage',
  data () {
    return {
      parms: {
        type: '30',
        stime: '',
        etime: ''
      },
      all: {},
      list: '',
      graph: '',
      pie: {},
      lineInfo: [
        { name: '发文量', type: 'article' },
        { name: '阅读量', type: 'read_count' },
        { name: '点赞量', type: 'likes' },
        { name: '评论量', type: 'comment' },
        { name: '收藏量', type: 'collection' },
        { name: '转发量', type: 'follow' },
        { name: '不喜欢', type: 'unlikes' }
      ],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  components: {
    Statist,
    LineChart,
    DoughnutChart
  },
  created () {
    // 指定有数据的时间段
    this.parms.time = [new Date('2020-03-01 00:00:00'), new Date('2020-04-30 23:59:59')]
    this.loadDataByTimeRange(this.parms.time)
  },
  methods: {
    loadDataByTimeRange: function (e) {
      this.parms.type = -1
      this.parms.stime = e[0].getTime()
      this.parms.etime = e[1].getTime()
      this.getFansStatistics()
    },
    loadDataByButton: function (e) {
      if (e == '1') { // 本周
        this.parms.stime = DateUtil.getWeekSTime()
        this.parms.etime = DateUtil.getWeekETime()
      } else {
        this.parms.etime = DateUtil.getNearTime(0)
        this.parms.stime = DateUtil.getNearTime(e)
      }
      this.getFansStatistics()
    },
    async getFansStatistics () {
      console.log(this.parms)
      const result = await getFansStatistics(this.parms)

      this.list = result.data
      const all = { article: 0, likes: 0, collection: 0, forward: 0, comment: 0, read_count: 0 }
      const chats = {}
      for (let i = 0; i < result.data.length; i++) {
        const tmp = result.data[i]
        const time = DateUtil.format13(tmp.created_time)
        const data = chats[time] ? chats[time] : {}
        for (let j = 0; j < this.lineInfo.length; j++) {
          const k = this.lineInfo[j].type
          all[k] += tmp[k]
          let val = data[k] ? data[k] : 0
          val += tmp[k]
          data[k] = val
        }
        chats[time] = data
      }
      this.all = all
      this.graph = chats
      this.parseToLine(chats, all)
    },
    parseToLine: function (chats, all) {
      // 排序
      var name = []
      for (const k in chats) {
        name.push(k)
      }
      name.sort()
      const series = {}// 折线图数据
      const pie = {}// 饼图数据
      for (let i = 0; i < name.length; i++) {
        for (let j = 0; j < this.lineInfo.length; j++) {
          const k = this.lineInfo[j].type
          series[k] = series[k] ? series[k] : []
          series[k].push(chats[name[i]][k])
          pie[k] = pie[k] ? pie[k] : {}
          pie[k].title = this.lineInfo[j].name + '-转化率'
          pie[k].data = pie[k].data ? pie[k].data : []
          pie[k].legend = pie[k].legend ? pie[k].legend : []
          pie[k].legend.push(name[i])
          // pie[k]['data'].push({value:(chats[name[i]][k]/chats[name[i]]['article']).toFixed(2),name:name[i]})
          pie[k].data.push({ value: chats[name[i]][k], name: name[i] })
        }
      }
      const data = []
      const legend = []
      for (let i = 0; i < this.lineInfo.length; i++) {
        data.push({
          name: this.lineInfo[i].name,
          type: 'line',
          // stack: '总量',
          areaStyle: {},
          data: series[this.lineInfo[i].type]
        })
        legend.push(this.lineInfo[i].name)
      }
      const lineOption = {
        title: { text: '明细数据' },
        tooltip: { trigger: 'axis' },
        legend: { data: legend },
        // grid: {left: '2%',right: '2%', bottom: '2%',containLabel: true},
        xAxis: { type: 'category', boundaryGap: false, data: name },
        yAxis: { type: 'value' },
        series: data
      }
      this.pie = pie
      this.$refs.lineChart.setOptions(lineOption)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.fans-container {
  background-color: #ffffff;
  text-align: left;
  border: 1px solid #e7e7e9;
  header {
    color: #323745;
    font-size: 14px;
    height: 55px;
    line-height: 55px;
    padding: 0 15px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #e8e8e8;
  }
  .tabBar {
    font-size: 14px;
    padding: 0 15px;
    height: 55px;
    line-height: 55px;
    border-bottom: 1px dashed #cccccc;
    a {
      margin-right: 35px;
      color: #323745;
      &.active {
        color: #3296fa;
      }
    }
  }
  .filter {
    font-size: 14px;
    padding: 20px 0 20px 20px;
    span {
      border: 1px solid #3296fa;
      color: #3296fa;
      padding: 5px 10px;
      cursor: pointer;
      &:nth-child(1){
        border-right: none;
      }
      &:nth-child(2){
        border-right: none;
      }
      &.active {
        background-color: #3296fa;
        color: #ffffff;
      }
    }
    .el-date-editor {
      margin-left: 20px;
    }
  }
  .chart {
    padding: 0 20px;
    overflow: hidden;
    margin-bottom: 30px;
  }
}
</style>
